<template>
  <div>
     <header-page></header-page>
    <!-- <div class="nav">
      <ul class="myul1">
        <li><span class="span1"></span><span>收藏鲜花网(hua.com)</span></li>
        <li><span class="span2"></span><span>关注微信</span></li>
        <li><span class="span3"></span><span>花礼网app</span></li>
      </ul>
      <ul class="myul2">
        <li><a href="">您好,请登录</a> <router-link :to="{path:'demo2'}">注册</router-link></li>
        <li><a href="">订单查询</a></li>
        <li><a href=""> 我的花礼</a></li>
        <li>
            <div class="dropdown box1">
  <button class="btn btn-default dropdown-toggle btn1" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    客户服务
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu newul" >
    <li><a href="#">在线付款</a></li>
    <li><a href="#">帮助中心</a></li>
    <li><a href="#">售后服务</a></li>
   <li><a href="#">配送范围</a></li>
   <li><a href="#">留言反馈</a></li>
  </ul>
</div>
        </li>
        <li>
              <span class="span4"></span><div class="dropdown box1">
  <button class="btn btn-default dropdown-toggle btn1" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    购物车
    <span class="span5">(0)</span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu newu2" >
    <li><a href="#">您的购物车没有商品，先去选购吧</a></li>
   
  </ul>
</div>
        </li>
        <li class="listli"><a>中国鲜花礼品网:领先品牌</a></li>
      </ul>
    </div>
    <div class="header">
      <div class="left"></div>
      <div class="center">
        <input type="text" placeholder="  商品关键词" /><button>搜索</button>
      </div>
      <div class="right">
        <i class="myi1"></i><span>400-889-8188</span> &nbsp; <span>|</span>&nbsp;
        <i class="myi2"></i> <span>在线客服</span>
      </div>
    </div> -->

    <div class="search">
      <div class="zhuce">
        <ul class="top">
          <li id="phonezc">手机账号注册</li>
          <li id="emailzc">邮箱账号注册</li>
        </ul>

        <div class="aside">
          <div class="mytoggle1">
            <div class="myphone">
              <span class="left1"></span>
              <input type="text" placeholder="  请输入手机" id="mytitle1" />
              <span id="right1"></span>
            </div>
            <div class="dxyz">
              <span class="left2"></span>
              <input
                type="text"
                placeholder="  请输入短信验证码"
                id="mytitle2"
              />
              <span id="right2"></span>
              <button id="btn">获取验证码</button>
            </div>
            <div class="qsrmm">
              <span class="left3"></span>
              <input type="password" placeholder="  请输入密码" id="mytitle3" />
              <span id="right3"></span>
            </div>
            <button id="mybtn">注册</button>
          </div>

          <div class="mytoggle2">
            <div class="myphone">
              <span class="left1"></span>
              <input type="text" placeholder="  请输入邮箱" id="mytitle4" />
              <span id="right4"></span>
            </div>
            <div class="dxyz">
              <span class="left2"></span>
              <input type="password" placeholder="  请输入密码" id="mytitle5" />
              <span id="right5"></span>
            </div>

            <button id="mybtn1">注册</button>
          </div>
        </div>

        <div class="bottom">
          <ul class="row">
            <li class="col-md-3"><span class="myqq"></span><span>QQ</span></li>
            <li class="col-md-3">
              <span class="myzfb"></span><span>支付宝</span>
            </li>
            <li class="col-md-6">
              <router-link to="/login" class="dlzh">登录账号></router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <!-- <div class="footer">
      <ul class="ul1">
        <li>首页</li>
        <li>关于我们</li>
        <li>媒体报道</li>
        <li>联系方式</li>
        <li>企业团购</li>
        <li>花店入驻</li>
        <li>友情链接</li>
        <li>花店补款</li>
      </ul>
      <span>为什么选择中国鲜花礼品</span>
      <div class="myimg">
        <img src="../../assets/images/register/myimg1.png" alt="" />
        <img src="../../assets/images/register/myimg2.png" alt="" />
        <img src="../../assets/images/register/myimg3.png" alt="" />
        <img src="../../assets/images/register/myimg4.png" alt="" />
      </div>
      <p class="myp">
        <span>中国花卉协会会员</span><span>中国电子商务协会会员</span
        ><span> ICP经营许可证：</span><span>粤B2-20050744</span
        ><span>粤ICP备09171662号</span
        ><span>粤公网安备44030502000373号 Copyright © 2005-2021</span>
      </p>
      <p><a href="#">www.hua.com</a><span> 深圳市百易信息技术有限公司</span></p>
    </div> -->
    <footer-page></footer-page>
  </div>
</template>

<script>
import HeaderPage from "../../components/Header/header.vue";
import footerPage from "../../components/Footer/footer.vue";
export default {
    components: {
    HeaderPage,
    footerPage,
  }
};
$(function () {
  $("#phonezc").on("click", function () {
    $("#phonezc").css({
      "border-bottom": "2px solid #FF734C",
      color: "#FF734C",
    });
    $("#emailzc").css({ "border-bottom": "none", color: "#232628" });
  });
  $("#emailzc").on("click", function () {
    $("#emailzc").css({
      "border-bottom": "2px solid #FF734C",
      color: "#FF734C",
    });
    $("#phonezc").css({ "border-bottom": "none", color: "#232628" });
  });

  $("#phonezc").on("click", function () {
    $(".mytoggle2").hide();
    $(".mytoggle1").show();
  });
  $("#emailzc").on("click", function () {
    $(".mytoggle1").hide();
    $(".mytoggle2").show();
  });
  //表单验证123
  // 手机号
  var m;
  var m1;
  var m2;
  var m3;
  var m4;
  $("#mytitle1").on("blur", function () {
    console.log($(this).val());
    var reg = /^138\d{8}$/;
    if ($("#mytitle1").val() == "") {
      $("#right1").html("输入有误");
      $("#right1").css({ color: "red" });
      m = false;
      return m;
    } else if (!reg.test($("#mytitle1").val())) {
      $("#right1").html("输入有误");
      //    $("#mytitle").val("")
      $("#right1").css({ color: "red" });
      m = false;
      return m;
    } else {
      $("#right1").html("正确");
      $("#right1").css({ color: "green" });
      m = true;
      return m;
    }
  });

  var i = 1;
  var time;

  $("#btn").on("click", function () {
    console.log(1);
    alert("123456");
    if (i == 1) {
      i--;
      clearInterval(time);
      var num = 60;
      time = setInterval(function () {
        num--;
        $("#btn").html("剩余" + num + "秒");
        if (num <= 0) {
          i++;
          $("#btn").html("获取验证码");
          clearInterval(time);
        }
        $("#btn").show();
      }, 1000);
    }
    return false;
  });
  $("#mytitle2").on("blur", function () {
    console.log($(this).val());
    var reg = /^123456$/;
    if ($("#mytitle2").val() == "") {
      $("#right2").html("输入有误");
      $("#right2").css({ color: "red" });
      m1 = false;
      return m1;
    } else if (!reg.test($("#mytitle2").val())) {
      $("#right2").html("输入有误");
      //    $("#mytitle").val("")
      $("#right2").css({ color: "red" });
      m1 = false;
      return m1;
    } else {
      $("#right2").html("正确");
      $("#right2").css({ color: "green" });
      m1 = true;
      return m1;
    }
  });
  $("#mytitle3").on("blur", function () {
    console.log($(this).val());
    var reg = /^\d{6}$/;
    if ($("#mytitle3").val() == "") {
      $("#right3").html("输入有误");
      $("#right3").css({ color: "red" });
      m2 = false;
      return m2;
    } else if (!reg.test($("#mytitle3").val())) {
      $("#right3").html("输入有误");
      //    $("#mytitle").val("")
      $("#right3").css({ color: "red" });
      m2 = false;
      return m2;
    } else {
      $("#right3").html("正确");
      $("#right3").css({ color: "green" });
      m2 = true;
      return m2;
    }
  });
  $("#mybtn").on("click", function () {
    console.log(1);
    if (m == true && m1 == true && m2 == true) {
      alert("注册成功");
      window.location.replace("/login#/login")
      // this.$router.push('/login')
    } else {
      alert("注册失败，请重新输入");
    }
  });

  $("#mytitle4").on("blur", function () {
    console.log($(this).val());
    var reg = /^[a-zA-Z0-9_-]+@qq.com$/;
    if ($("#mytitle4").val() == "") {
      $("#right4").html("输入有误");
      $("#right4").css({ color: "red" });
      m3 = false;
      return m3;
    } else if (!reg.test($("#mytitle4").val())) {
      $("#right4").html("输入有误");
      //    $("#mytitle").val("")
      $("#right4").css({ color: "red" });
      m3 = false;
      return m3;
    } else {
      $("#right4").html("正确");
      $("#right4").css({ color: "green" });
      m3 = true;
      return m3;
    }
  });
  $("#mytitle5").on("blur", function () {
    console.log($(this).val());
    var reg = /^\d{6}$/;
    if ($("#mytitle5").val() == "") {
      $("#right5").html("输入有误");
      $("#right5").css({ color: "red" });
      m4 = false;
      return m4;
    } else if (!reg.test($("#mytitle5").val())) {
      $("#right5").html("输入有误");
      //    $("#mytitle").val("")
      $("#right5").css({ color: "red" });
      m4 = false;
      return m4;
    } else {
      $("#right5").html("正确");
      $("#right5").css({ color: "green" });
      m4 = true;
      return m4;
    }
  });
  $("#mybtn1").on("click", function () {
    console.log(1);
    if (m3 == true && m4 == true) {
      alert("注册成功");
      window.location.replace("/login#/login")
    } else {
      alert("注册失败，请重新输入");
    }
  });
});
</script>

<style scoped lang='less'>
* {
  padding: 0;
  margin: 0;
}
.nav {
    font-size: 10px;
    color: #737373;
  height: 40px;
  width: 100%;
  background-color: #F2F2F2;
  line-height: 40px;
  padding: 0px 150px;
  a{
      color: #737373;
  }
  
  ul {
    float: left;
  }
  .myul1 {
    li {
      float: left;
      list-style: none;
      margin-left: 10px;
      
      .span1 {
        width: 20px;
        height: 20px;
       display: inline-block;
        background-size: 100% 100%;
        background: url(../../assets/images/register/jinglingtu1.png) -45px -15px;
      }
      .span2 {
        width: 20px;
        height: 20px;
       display: inline-block;
        background-size: 100% 100%;
        background: url(../../assets/images/register/jinglingtu1.png) -21px -14px;
      }
      .span3{
        width: 20px;
        height: 20px;
       display: inline-block;
        background-size: 100% 100%;
        background: url(../../assets/images/register/jinglingtu1.png) 3px -15px;
      }
   
    }
  }
  
  .myul2{
      margin-left: 10px;
      li{
          line-height: 20px;
          margin-top: 10px;
          height: 20px;
          list-style: none;
          float: left;
          margin-left: 10px;
          border-right: 1px solid #D9D9D9;
          padding: 0px 6px;
          .btn1{
              border: none;
              background-color: #F2F2F2;
              outline: none;
              font-size: 10px;
              color: #737373 ;
          }
             .span4{
                 float: left;
           width: 20px;
        height: 20px;
    
        background-size: 100% 100%;
           background: url(../../assets/images/register/jinglingtu1.png) -308px -104px;
      }
      .span5{
          color: #FF754F;
      }
      .box1{
          float: left;
      }
      }
     .listli{
         border: none;
     }
  }
}

.header {
  height: 100px;
  width: 100%;
  //   background-color: gold;
  padding: 0px 200px;
  .left {
    height: 50px;
    margin-top: 20px;
    width: 180px;
    display: inline-block;
    background-size: 100% 100%;
    background: url(../../assets/images/homeimg/jinglingtu2.png) 7px -238px;
    height: 41px;
    width: 245px;
  }
  .center {
    margin-left: 450px;
    margin-top: -30px;
    input {
      border: 1px solid #ed6400;
      height: 30px;
    }
    button {
      background-color: #ed6400;
      color: white;
      height: 30px;
      width: 60px;
      outline: none;
      border: none;
    }
  }
  .right {
    float: right;
    margin-top: -25px;
    .myi1 {
      width: 30px;
      height: 23px;
      float: left;
      background-size: 100% 100%;
      //   background: url(../../assets/images/register/jinglingtu2.png) ;
      // background-color: yellow;
      background: url(../../assets/images/register/jinglingtu4.png) 44px -50px;
    }
    .myi2 {
      width: 30px;
      height: 23px;
      float: right;
      margin-left: 10px;
      background-size: 100% 100%;
      //   background: url(../../assets/images/register/jinglingtu2.png) ;
      // background-color: yellow;
      background: url(../../assets/images/register/jinglingtu4.png) 123px -133px;
    }
  }
}
.search {
  width: 100%;
  height: 400px;
  background-image: url(../../assets/images/register/login.jpg);
  background-size: 100% 100%;
  padding: 0px 200px;
  .zhuce {
    margin-top: 10px;
    height: 360px;
    width: 300px;
    background-color: white;
    float: right;
    border-radius: 5px;
    position: relative;
    .top {
      height: 40px;
      width: 100%;
      padding: 0px 25px;
      line-height: 40px;
      li {
        float: left;
        list-style: none;
        width: 50%;
        border-bottom: 1px solid #e9ecf0;
      }
    }

    .aside {
      width: 100%;
      height: 280px;
      //   background-color: #000000;
      padding: 10px 20px;
      .mytoggle1 {
        //   display: none;
        .myphone {
          height: 25px;
          width: 100%;
          font-size: 10px;
          line-height: 25px;
          // background-color: red;
          border: 1px solid #e9ecf0;
          .left1 {
            width: 20px;
            height: 23px;
            float: left;
            background-size: 100% 100%;
            background: url(../../assets/images/register/jinglingtu3.png) -95px -30px;
          }
          input {
            border: none;
            outline: none;
            margin-left: 10px;
            height: 23px;
            width: 105px;
            // background-color: #000000;
            float: left;
          }
          #right1 {
            float: left;
            width: 55px;
            height: 23px;
            // background-color: red;
          }
        }
        .dxyz {
          margin-top: 15px;
          height: 25px;
          width: 100%;
          font-size: 10px;
          line-height: 25px;
          // background-color: red;
          border: 1px solid #e9ecf0;
          .left2 {
            width: 20px;
            height: 23px;
            float: left;
            background-size: 100% 100%;
            background: url(../../assets/images/register/jinglingtu3.png) -6px -30px;
          }
          input {
            border: none;
            outline: none;
            margin-left: 10px;
            height: 23px;
            width: 105px;
            // background-color: #000000;
            float: left;
          }
          #right2 {
            float: left;
            width: 55px;
            height: 23px;
            // background-color: red;
          }
          #btn {
            float: left;
            height: 23px;

            font-size: 10px;
            padding: 0px 4px;
            line-height: 20px;
            border: none;
            background-color: #d1d1d1;
          }
        }

        .qsrmm {
          margin-top: 15px;
          height: 25px;
          width: 100%;
          font-size: 10px;
          line-height: 25px;
          // background-color: red;
          border: 1px solid #e9ecf0;
          .left3 {
            width: 20px;
            height: 23px;
            float: left;
            background-size: 100% 100%;
            background: url(../../assets/images/register/jinglingtu3.png) -50px -30px;
          }
          input {
            border: none;
            outline: none;
            margin-left: 10px;
            height: 23px;
            width: 105px;
            // background-color: #000000;
            float: left;
          }
          #right3 {
            float: left;
            width: 55px;
            height: 23px;
            // background-color: red;
          }
        }
        #mybtn {
          width: 100%;
          height: 26px;
          margin-top: 30px;
          background-color: #ff6c43;
          outline: none;
          border: none;
          border-radius: 15px;
          color: white;
        }
      }

      .mytoggle2 {
        display: none;
        .myphone {
          height: 25px;
          width: 100%;
          font-size: 10px;
          line-height: 25px;
          // background-color: red;
          border: 1px solid #e9ecf0;
          .left1 {
            width: 20px;
            height: 23px;
            float: left;
            background-size: 100% 100%;
            background: url(../../assets/images/register/jinglingtu3.png) -95px -30px;
          }
          input {
            border: none;
            outline: none;
            margin-left: 10px;
            height: 23px;
            width: 105px;
            // background-color: #000000;
            float: left;
          }
          #right4 {
            float: left;
            width: 55px;
            height: 23px;
            // background-color: red;
          }
        }
        .dxyz {
          margin-top: 15px;
          height: 25px;
          width: 100%;
          font-size: 10px;
          line-height: 25px;
          // background-color: red;
          border: 1px solid #e9ecf0;
          .left2 {
            width: 20px;
            height: 23px;
            float: left;
            background-size: 100% 100%;
            background: url(../../assets/images/register/jinglingtu3.png) -6px -30px;
          }
          input {
            border: none;
            outline: none;
            margin-left: 10px;
            height: 23px;
            width: 105px;
            // background-color: #000000;
            float: left;
          }
          #right5 {
            float: left;
            width: 55px;
            height: 23px;
            // background-color: red;
          }
        }

        #mybtn1 {
          width: 100%;
          height: 26px;
          margin-top: 30px;
          background-color: #ff6c43;
          outline: none;
          border: none;
          border-radius: 15px;
          color: white;
        }
      }
    }
    .bottom {
      background-color: #e5e5e5;
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 40px;
      padding: 0px 20px;
      li {
        list-style: none;
        line-height: 40px;
        .myqq {
          width: 20px;
          height: 23px;
          float: left;
          background-size: 100% 100%;
          background: url(../../assets/images/register/jinglingtu3.png) 140px -93px;
          margin-top: 8px;
        }
        .myzfb {
          width: 20px;
          margin-top: 8px;
          height: 23px;
          float: left;
          background-size: 100% 100%;
          background: url(../../assets/images/register/jinglingtu3.png) 110px -93px;
        }
        .dlzh {
          float: right;
          color: #ff734c;
        }
      }
    }
  }
}
.footer {
  text-align: center;
  height: 200px;
  width: 100%;
  // background-color: yellow;
  padding: 20px 200px;
  .ul1 {
    li {
      float: left;
      width: 12.5%;
      list-style: none;

      border-right: 1px solid #dedede;
      color: #737373;
    }
  }
  .myimg {
    margin-top: 30px;
    img {
      height: 50px;
    }
  }
  .myp {
    span {
      margin-left: 10px;
      font-size: 10px;
    }
  }
}
</style>